<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.css">
    <script src="../jquery-3.2.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>

</head>
<body>
<p>
    table 表格样式
    table-striped 斑马线
    table-hover 悬停样式
    table-bordered
</p>

<table class="table table-striped table-hover table-bordered">
    <tr class="danger">
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
    </tr>
    <tr class="info">
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
    </tr>
    <tr class="success">
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
    </tr>
    <tr class="warning">
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
    </tr>
    <tr class="active">
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
    </tr>
    <tr>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
    </tr>
    <tr>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
    </tr>
</table>
</body>
</html>